<template>
  <div id="myChart7" :style="{ width: '100%', height: '100%' }"></div>
</template>

<script>
import { defineComponent, toRefs, reactive, onMounted } from 'vue'
import * as echarts from 'echarts'

export default defineComponent({
  name: 'LineChart',
  setup() {
    const state = reactive({
      option: {
        grid: {
          top: '14%',
          left: '2%',
          right: '5%',
          bottom: '10%',
          containLabel: true,
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
            axisTick: {
              alignWithLabel: true,
            },
            axisLabel: {
              textStyle: {
                color: '#AFC0D5'
              }
            },
          }
        ],
        yAxis: [
          {
            name: '单位（万',
            type: 'value',
            nameTextStyle: {
              color: '#058CFF'
            },
            axisLabel: {
              textStyle: {
                color: '#AFC0D5'
              }
            },
            axisLine: {
              show: true
            },
            splitLine: {     //网格线
              show: false
            }
          }
        ],
        series: [
          {
            type: 'line',
            stack: 'Total',
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(13,190,255,1)' // 0% 处的颜色
                  },
                  {
                    offset: 0.6,
                    color: 'rgba(13,190,255,0.07)' //
                  },
                  {
                    offset: 1,
                    color: 'rgba(13,190,255,0)' //
                  }
                ],
                global: false // 缺省为 false
              }
            },
            itemStyle: {
              normal: {
                color: '#42B9FF'
              }
            },
            lineStyle: {
              color: '#42B9FF'
            },
            label: {
              show: true,
              position: 'top',
              color: '#43FFFD'
            },
            emphasis: {
              focus: 'series'
            },
            data: [120, 132, 101, 134, 90, 230, 210]
          }
        ]
      },
    })
    const initeCharts = () => {
      let myChart = echarts.init(document.getElementById('myChart7'))
      // 绘制图表
      myChart.setOption(state.option)
    }

    onMounted(() => {
      initeCharts()
    })

    return {
      ...toRefs(state),
    }
  },
})
</script>

<style scoped>

</style>
